<template>
  <div>
    <!-- 页面标题 -->
    <div id="refund-check-title">
      <div style="width:200px;float:left;height:100%">
        <h1 style="margin-left:50px">退款详情</h1>
      </div>
      <div style="float:left;height:100%;margin-left:20%">
        <el-button type="primary"
                   style="float:left;margin-top:10px"
                   @click="back"
                   round>返回</el-button>
      </div>

    </div>
    <div id="refund-check-messagediv">
      <div class="refund-check-messagetop">
        <i class="el-icon-document"
           style="margin-left:50px"></i>&nbsp;&nbsp;订单信息
      </div>
      <div id="refund-check-messagebottom">
        <el-descriptions direction="vertical"
                         :column="4"
                         border>
          <el-descriptions-item label="服务编号">{{refund.refundno}}</el-descriptions-item>
          <el-descriptions-item label="申请状态">
            <font v-if="refund.refundstatus==2">待处理</font>
            <font v-else-if="refund.refundstatus==0">已拒绝</font>
            <font v-else-if="refund.refundstatus==1">已通过</font>
          </el-descriptions-item>
          <el-descriptions-item label="申请时间">{{refund.applydate}}</el-descriptions-item>
          <el-descriptions-item label="用户名">{{refund.username}}</el-descriptions-item>
          <el-descriptions-item label="订单编号">{{refund.ordernum}}&nbsp;&nbsp;

            <el-button icon="el-icon-search"
                       @click="checkorder()"
                       circle></el-button>
          </el-descriptions-item>
          <el-descriptions-item label="订单金额">{{refund.refundmoney}}</el-descriptions-item>
          <el-descriptions-item label="实际退款金额">{{refund.refundmoney}}</el-descriptions-item>
          <el-descriptions-item label="退款方式">{{refund.refundmethod}}</el-descriptions-item>
          <el-descriptions-item label="退款类型">{{refund.refundclassify}}</el-descriptions-item>
          <el-descriptions-item label="退款原因">{{refund.refundreason}}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>

    <!-- 处理备注 -->
    <div id="refund-check-remarkdiv">

      <!-- 已处理/已拒绝 -->
      <div v-show="this.refund.refundstatus==0||this.refund.refundstatus==1">
        <div id="refund-check-remarktittle">
          处理信息
        </div>

        <el-descriptions direction="vertical"
                         :column="3"
                         border>
          <el-descriptions-item label="处理人员">kooriookami</el-descriptions-item>
          <el-descriptions-item label="处理时间">18100000000</el-descriptions-item>
          <el-descriptions-item label="处理状态">
            <font v-if="this.refund.refundstatus==2">待处理</font>
            <font v-else-if="this.refund.refundstatus==0">已拒绝</font>
            <font v-else-if="this.refund.refundstatus==1">已通过</font>
          </el-descriptions-item>
          <el-descriptions-item label="处理备注">苏州市</el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 确认是否退款，并备注 -->
      <div v-show="this.refund.refundstatus==2">
        <div id="refund-check-remarktittle">
          处理备注
        </div>
        <div id="refund-check-remarkmessage">
          <div id="refund-remark"></div>
        </div>
        <el-button type="primary"
                   style="margin-top:10px"
                   @click="accept"
                   round>确认退款</el-button>
        <el-button type="warning"
                   style="margin-top:10px;margin-left:50px"
                   @click="refuse"
                   round>拒绝退款</el-button>
      </div>

    </div>
    <el-dialog :visible.sync="orderVisible">
      <el-descriptions title="原订单详情"
                       direction="vertical"
                       :column="3"
                       border>
        <el-descriptions-item label="订单流水号">{{orderData.orderNo}}</el-descriptions-item>
        <el-descriptions-item label="订单类型">{{orderData.orderType}}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <font v-if="orderData.orderStatus==0">待支付</font>
          <font v-else-if="orderData.orderStatus==1">进行中</font>
          <font v-else-if="orderData.orderStatus==2">已完成</font>
          <font v-else-if="orderData.orderStatus==3">已取消</font>
          <font v-else-if="orderData.orderStatus==4">已退款</font>

        </el-descriptions-item>
        <el-descriptions-item label="应付金额">{{orderData.etMoney}}</el-descriptions-item>
        <el-descriptions-item label="实际付款">{{orderData.actMoney}}</el-descriptions-item>
        <el-descriptions-item label="支付方式">
          <font v-if="orderData.payWay==0">微信</font>
          <font v-else-if="orderData.payWay==1">刷卡</font>
          <font v-else>其他方式</font>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">{{orderData.gmtCreated}}</el-descriptions-item>
        <el-descriptions-item label="支付时间">{{orderData.gmtPayed}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>
<script>
import E from "wangeditor";
export default {
  data () {
    return {
      refund: {},
      editor: null,
      orderVisible: false,
      orderData: {

      },
    }
  },
  mounted () {
    // 创建编辑器
    this.editor = new E(`#refund-remark`)
    this.editor.config.height = 100
    this.editor.create()
    this.findrefund()
  },
  beforeDestroy () {
    // 销毁编辑器
    this.editor.destroy()
    this.editor = null
    console.log("destroy editor");
  },
  methods: {
    findrefund () {
      this.$axios({
        url: "/refund/findRefundById",
        method: "get",
        params: {
          id: this.$route.params.id
        },
        async: false
      }).then(res => {
        this.refund = res.data.data;
        let ordernum = this.refund.ordernum;
        this.$axios({
          method: "get",
          url: "/financial/order/findOrderByOrderNo/" + ordernum,
        }).then(res => {
          this.orderData = res.data.data;
          console.log(this.refund.ordernum);
          console.log(this.orderData);
          console.log(res.data.data);
        });
      });

    },
    back () {
      this.$router.back(-1);
    },
    //查看原订单详情
    checkorder (ordernum) {
      this.orderVisible = true;

    },
    //同意退款
    accept () {
      this.$$axios({
        method: 'get',
        url: '/refund/changeHandleMessage',
        params: {
          handleexplain: this.editor.txt.text(),
          handleby: "Rentongrui",
          handletime: new Date(),
          handlestate: true
        },
        async: false,
      }).then(res => {
        this.findrefund();
        this.$forceUpdate();
      });
    },
    //拒绝退款
    refuse () {
      this.$$axios({
        method: 'get',
        url: '/refund/changeHandleMessage',
        params: {
          handleexplain: this.editor.txt.text(),
          handleby: "Rentongrui",
          handletime: new Date(),
          handlestate: false
        },
        async: false,
      }).then(res => {
        this.findrefund();
        this.$forceUpdate();
      });
    }
  }
}
</script>
<style scoped>
* {
  /* border: 1px solid red; */
  border-radius: 3px;
}
#refund-check-title {
  margin-left: 50px;
  margin-right: 50px;
  height: 60px;
}
#refund-check-messagediv {
  margin-left: 50px;
  margin-right: 50px;
  margin-top: 10px;
  border: 1px solid gainsboro;
  border-radius: 3px;
  overflow: hidden;
}
.refund-check-messagetop {
  width: 100%;
  height: 50px;
  background-color: #f0f0f0;
  line-height: 50px;
  font-size: 20px;
}
.el-icon-document {
  font-size: 30px;
  margin-top: 10px;
}
#refund-check-messagebottom {
  font-size: 20px;
  overflow: hidden;
  margin: 10px;
}
/* 处理备注 */
#refund-check-remarkdiv {
  margin-left: 50px;
  margin-right: 300px;
  margin-top: 30px;
  overflow: hidden;
}
#refund-check-remarktittle {
  width: 100%;
  height: 60px;
  line-height: 60px;
}
#refund-check-remarkmessage {
  width: 100%;
  overflow: hidden;
}
</style>